<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-app-development.qdoc -->
  <title>Developing Qt Quick Applications | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Developing Qt Quick Applications</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="creator-design-mode.html" />
  <link rel="next" href="quick-projects.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="creator-design-mode.html">Designing User Interfaces</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="quick-projects.html">Creating Qt Quick Projects</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#related-topics">Related Topics</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Developing Qt Quick Applications</h1>
<span class="subtitle"></span>
<!-- $$$creator-visual-editor.html-description -->
<div class="descr"> <a name="details"></a>
<p>Qt Quick enables you to build UIs around the behavior of <i>components</i> and how they connect with one another. You create components using Qt Quick and QML types that are available in the Design mode. You can specify values for the <i>properties</i> of a component to change its appearance and behavior. All QML types have a set of predefined properties, some of which control things that are visible to users, while others are used behind the scene.</p>
<p>While it is useful to learn the basics of Qt Quick, you can also rely on Qt Design Studio to write the code for you when you drag-and-drop the ready-made components to the working area and change them to your liking by modifying their properties in the Design mode. You can always check up details in the extensive Qt Quick documentation by pressing <b>F1</b>.</p>
<ul>
<li><a href="quick-projects.html">Creating Qt Quick Projects</a><p>You can use wizards to create Qt Quick projects.</p>
</li>
<li><a href="creator-using-qt-quick-designer.html">Editing QML Files in Design Mode</a><p>You can use the <b>Form Editor</b> or the <b>Text Editor</b> in the Design mode to develop Qt Quick applications.</p>
</li>
<li><a href="quick-components.html">Creating Components</a><p>In addition to your imported artwork, you can use the Design mode to customize ready-made components or design any custom form and shape directly as QML types. You can import visual assets in various formats, such as PNG, JPG, and SVG for use in the components.</p>
</li>
<li><a href="qtquick-navigator.html">Managing Item Hierarchy</a><p>You can manage the items in the current QML file and their relationships in the <b>Navigator</b>.</p>
</li>
<li><a href="qtquick-properties.html">Specifying Item Properties</a><p>You can specify values for the properties of a component to change its appearance and behavior. All QML types have a set of predefined properties. Some properties, such as position, size, and visibility, are common to all QML types, whereas others are specific to the QML type. You can specify properties for your components in the <b>Properties</b> pane.</p>
</li>
<li><a href="studio-timeline.html">Creating Animations</a><p>You can use a timeline and keyframe based editor in the <b>Timeline</b> view to animate the properties of UI components. Animating properties enables their values to move through intermediate values at specified keyframes instead of immediately changing to the target value.</p>
</li>
<li><a href="qmldesigner-connections.html">Adding Connections</a><p>You can create connections between the UI components and the application to enable them to communicate with each other. For example, how does the appearance of a button change on a mouse click and which action does the application need to perform in response to it.</p>
<p>You can also create connections between UI components by binding their properties together. This way, when the value of a property changes in a parent component, it can be automatically changed in all the child components, for example.</p>
</li>
<li><a href="quick-states.html">Adding States</a><p>Qt Quick allows you to declare various UI states that describe how component properties change from a base state. Therefore, states can be a useful way of organizing your UI logic. You can associate transitions with items to define how their properties will animate when they change due to a state change.</p>
</li>
</ul>
<a name="related-topics"></a>
<h2 id="related-topics">Related Topics</h2>
<ul>
<li><a href="qmldesigner-pathview-editor.html">Editing PathView Properties</a><p>You can use a graphical spline editor to specify <a href="http://doc.qt.io/qt-5/qml-qtquick-pathview.html">PathView</a> paths. A path view lays out data provided by data models on a <a href="http://doc.qt.io/qt-5/qml-qtquick-path.html">Path</a>.</p>
</li>
<li><a href="qtquick-iso-icon-browser.html">Browsing ISO 7000 Icons</a><p>You can add ISO 7000 icons from a library delivered with Qt Creator to UIs and change their color.</p>
</li>
<li><a href="creator-quick-ui-forms.html">Qt Quick UI Forms</a><p>Some of the wizards create Qt Quick projects that contain UI forms (.ui.qml files). The forms use a purely declarative subset of the QML language and you can edit them in the Design mode.</p>
</li>
<li><a href="creator-qml-modules-with-plugins.html">Using QML Modules with Plugins</a><p>QML modules may use plugins to expose components defined in C++ to QML applications. Qt Creator cannot load the plugins to determine the details of the contained components, and therefore, the modules must provide extra type information for code completion and the semantic checks to work correctly.</p>
</li>
<li><a href="quick-converting-ui-projects.html">Converting UI Projects to Applications</a><p>Qt Quick UI projects (.qmlproject) are useful for creating user interfaces. To use them for application development, you have to convert them to Qt Quick Application projects that contain .pro, .cpp, and .qrc files.</p>
</li>
</ul>
</div>
<!-- @@@creator-visual-editor.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="creator-design-mode.html">Designing User Interfaces</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="quick-projects.html">Creating Qt Quick Projects</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
